<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="d3.v3.min.js"></script>
    <script>
        let format = d3.time.format("%d-%b-%y")

        const width = 200
        height = 200

        const data = [
  {date: new Date(2007, 3, 24), value: 93.24},
  {date: new Date(2007, 3, 25), value: 95.35},
  {date: new Date(2007, 3, 26), value: 60.84},
  {date: new Date(2007, 3, 27), value: 99.92},
  {date: new Date(2007, 3, 30), value: 78.80},
  {date: new Date(2007, 4,  1), value: 99.47},
];
        let x = d3.time.scale()
        .rangeRound([0,width])

        let y = d3.scale.linear()
        .rangeRound([height,0])

        x.domain(d3.extent(data,d=>{
            return d.date
        }))

        y.domain([0,d3.max(data,d=>{
            return d.value
        })])

        let area = d3.svg.area()
        .x(d=>{
            return x(d.date)
        })
        .y0(d=>{
            return -10
        })
        .y1(d=>{
            return 10
        })
        .interpolate('basis')

        var svgContainer = d3.select("body").append("svg")
                                    .attr("width",width)
                                    .attr("height",height);

console.log(area(data));//M0,10L4.833333333333333,9.999999999999998C9.666666666666666,10,19.333333333333332,10,28.833333333333332,9.999999999999998C38.33333333333333,10,47.666666666666664,10,57.16666666666667,9.999999999999998C66.66666666666666,10,76.33333333333333,10,95.33333333333333,9.999999999999998C114.33333333333333,10,142.66666666666666,10,161.66666666666669,9.999999999999998C180.66666666666666,10,190.33333333333331,10,195.16666666666663,9.999999999999998L200,10L200,-10L195.16666666666663,-9.999999999999998C190.33333333333331,-10,180.66666666666666,-10,161.66666666666666,-9.999999999999998C142.66666666666666,-10,114.33333333333333,-10,95.33333333333333,-9.999999999999998C76.33333333333333,-10,66.66666666666666,-10,57.166666666666664,-9.999999999999998C47.666666666666664,-10,38.33333333333333,-10,28.833333333333332,-9.999999999999998C19.333333333333332,-10,9.666666666666666,-10,4.833333333333333,-9.999999999999998L0,-10Z

//给d赋属性
var lineGraph = svgContainer.append("g")
                            .append("path")
                            .attr("d",area(data))
                            .attr("stroke","blue")
                            .attr("stroke-width",2)
                            .attr("fill","steelblue")
                            .attr("transform","translate(0,100)");

    </script>
</body>
</html>